import { FC, useEffect, useState } from "react"
import { useSelector } from "react-redux/es/hooks/useSelector"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useApi } from "@/hooks"
// import { useSelector } from "react-redux"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
// import { Select } from "antd"

export type VenueTypeField = {
	venueTypeCode: string
}
export const venueMap = new Map([
	["zr", "label.realVenue"],
	["ty", "label.sportVenue"]
])
const VenueMutiple: FC<{ options?: string[]; labelId?: string; allowClear?: boolean }> = props => {
	const { newFormat } = useLocale()
	const { generalHttp } = useApi()
	const [options, setOptions] = useState<{ label: string; value: string }[]>([])
	const { locale } = useSelector((state: AppState) => state.user)
	useEffect(() => {
		getOptions()
	}, [])
	const getOptions = async () => {
		const [err, data] = await generalHttp("/venue/getVenues", {})
		if (!err) {
			console.log(
				(data as any)
					.map((item: any) => {
						return { label: locale === "zh_CN" ? item.venueName : item.venueEnName, value: item.venueCode }
					})
					.filter((item: { label: string; value: any }) => {
						return props.options ? (props.options as string[]).includes(item.value) : true
					})
			)
			setOptions(
				(data as any)
					.map((item: any) => {
						return { label: locale === "zh_CN" ? item.venueName : item.venueEnName, value: item.venueCode }
					})
					.filter((item: { label: string; value: any }) => {
						return props.options ? (props.options as string[]).includes(item.value) : true
					})
			)
		}
	}
	// console.log(newFormat({ id: "label.demoList.0" }))
	// const DynamicComponent = lazy(() => dynamicComponent(props.name))
	return (
		<SFormItem name="venueCodeList" label={newFormat({ id: props.labelId ?? `label.venueName` })}>
			{/* <Select style={{ width: "300px" }} options={options} /> */}
			<StyleSelect
				// loading={loading}
				allowClear={props.allowClear}
				mode="tags"
				maxTagCount={1}
				options={options}
				placeholder={newFormat({ id: "label.select_all" })}
				w={260}
			/>
		</SFormItem>
	)
}

export default VenueMutiple
